import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  pickOwnForBasicComponent,
  usePropsTwoWayValues,
} from 't/common/utils';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
  h,
} from 'vue';

import './Mobile.scss';
import _, { forIn } from 'lodash';

import {
  date,
  debounce,
  dom,
  setCssVar,
  useQuasar,
  scroll,
} from '@teld/q-components';

import MobileSelectClip from './MobileSelectClip';
import MobileClipDate from './MobileClipDate';
import MobileSelectClipDate from './MobileSelectClipDate';

import SelectHelper from './SelectHelper';

import {
  FilterFieldValueRange,
  FilterFieldDisplayType,
  useClips,
} from 't/bussiness/quick-filter/use-quick-filter';

export default defineComponent({
  props: {
    ...commonProps,
    loading: {
      type: Boolean,
      default() {
        return false;
      },
    },
    filterItems: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showTotalCount: { type: Boolean, default: false },
    showSummaryCount: { type: Boolean, default: true },
    selectHelperSearchConfig: {
      type: Object,
      default() {
        return {};
      },
    },
    selectHelperUpdateValueRange: {
      type: Function,
    },
    optionsPosition: {
      type: String,
      default: 'top',
    },
  },
  emits: ['filterChanged', 'searchValue', 'loadMore'],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();

    const valueTypeComponent = {
      [FilterFieldValueRange.SDO]: MobileSelectClip,
      [FilterFieldValueRange.Boolean]: MobileSelectClip,
      // [FilterFieldValueRange.Date]: MobileClipDate,
      [FilterFieldValueRange.Date]: MobileSelectClipDate,
    };

    function emitFilterChanged() {
      emit('filterChanged');
    }

    const { computedFilterItems } = useClips(props);

    async function searchCallBack(
      selectHelperPageIndex,
      selectHelperPageSize,
      defaultInputFilter,
      advanceFilter,
      dynamicFilter,
    ) {
      // debugger;
      let filter = defaultInputFilter;
      let pageIndex = selectHelperPageIndex;
      let pageSize = selectHelperPageSize;
      console.log(filter, pageIndex, pageSize);
      let res = {
        // ActionID: null,
        // ActionCode: null,
        // ActionName: null,
        // ResultType: 11,
        // EntityType: 3,
        // DataContent: null,
        // Record: {},
        List: [],
        Count: 0,
      };
      return Promise.resolve(res);
    }

    function hyperscriptSelectHelper(hProps) {
      let callback =
        props.selectHelperSearchConfig[hProps.ID] || searchCallBack;
      hProps.searchCallBack = callback;
      hProps.hideEmpty = false;
      hProps.enableStatistics = false;
      hProps.placeholder = hProps.fieldName;
      hProps['onUpdate:clips'] = valueRange => {
        props.selectHelperUpdateValueRange?.(hProps, valueRange);
      };
      return h(SelectHelper, hProps);
    }

    return () => {
      return (
        <div
          class='row items-center t-quick-filter_mobile_items-center for-saas'
          style={{
            'position': 'relative',
            '--t-saas-max-width': `${Math.round(100 / computedFilterItems.value.length) - 4}%`,
          }}
        >
          {slots.before && (
            <div class='t-quick-filter--before'>{slots.before?.()}</div>
          )}
          {computedFilterItems.value.map((item, index) => {
            let hProps = {
              ...item,
              showTotalCount: props.showTotalCount,
              showSummaryCount: props.showSummaryCount,
              isMultiple: item.isMultiple,
              enableAllItem: item.enableAllItem,
              label: item.fieldName,
              clips: item.valueRange,
              onFilterChanged: emitFilterChanged,
              onSearchValue: payload => {
                emit('searchValue', {
                  ...payload,
                  fieldCode: item.fieldCode,
                  item: item,
                });
              },
              onLoadMore: payload => {
                emit('loadMore', {
                  ...payload,
                  fieldCode: item.fieldCode,
                  item: item,
                });
              },
              optionsPosition: props.optionsPosition,
            };
            if (
              FilterFieldDisplayType.SelectHelper === item.displayType &&
              FilterFieldValueRange.SDO === item.valueType
            ) {
              return hyperscriptSelectHelper(hProps);
            }
            // if (item.valueRange) hProps[clips] = item.valueRange;
            let hComponent =
              valueTypeComponent[item.valueType] || MobileSelectClip;
            return <div class='selectContainer'>{h(hComponent, hProps)}</div>;
          })}
          {slots.after && (
            <div class='t-quick-filter--after'>{slots.after?.()}</div>
          )}
          {props.loading && <div class='t-quick-filter_loading'></div>}
        </div>
      );
    };
  },
});
